<template>
  <div class="wrapper">
    <com-header></com-header>
    <com-sidebar class="sidebar"></com-sidebar>
    <div class="main" :style="{ left: collapse ? '64px' : '200px' }">
      <com-tags></com-tags>
      <keep-alive :include="tagComponent">
        <router-view class="main-cont"></router-view>
      </keep-alive>
    </div>
  </div>

</template>

<script>
import comHeader from './Header.vue';
import comSidebar from './Sidebar.vue';
import comTags from './Tags.vue';
import Bus from './bus';
export default {
  name: "Base",
  components: { comHeader, comSidebar, comTags },
  data () {
    return {
      collapse: false,
      tagComponent: []
    }
  },
  created () {
    Bus.$on('collapse', isCollapse => {

      this.collapse = isCollapse;
    });

    // 只有在标签页列表里的页面才使用keep-alive，关闭标签之后就不保存到内存中了
    Bus.$on('tags', tagList => {

      for (let item of tagList) {

        item.name && this.tagComponent.push(item.name);
      }
    });
  }
}
</script>

<style scoped lang="less">
.wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: #eee;
}

.sidebar,
.main {
  position: absolute;
  top: 60px;
  bottom: 0;
}

.main {
  left: 200px;
  right: 0;
  padding: 20px;
  overflow: auto;
  background-color: #fff;
  transition: left .3s ease-in-out;
}

.main-cont {
  margin-top: 40px;
}
</style>
